<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <!-- <el-form :model="addApprovalCarForm" ref="addApprovalCarRef" :rules="addApprovalCarrules">
                        <el-form-item label="开始时间" :label-width="formLabelWidth"
                                      prop="startTime" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.startTime"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写开始时间"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="结束时间" :label-width="formLabelWidth"
                                      prop="endTime" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.endTime"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写结束时间"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="租车事由" :label-width="formLabelWidth"
                                      prop="description">
                            <el-input
                                    v-model="addApprovalCarForm.description"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写租车事由"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="到达地点" :label-width="formLabelWidth"
                                      prop="arrivalAddress">
                            <el-input
                                    v-model="addApprovalCarForm.arrivalAddress"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写到达地点"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="人员编号" :label-width="formLabelWidth"
                                      prop="teacherNumber">
                            <el-input
                                    v-model="addApprovalCarForm.teacherNumber"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写人员编号"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="人员姓名" :label-width="formLabelWidth"
                                      prop="teacherName">
                            <el-input
                                    v-model="addApprovalCarForm.teacherName"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写人员姓名"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="校区" :label-width="formLabelWidth"
                                      prop="campus" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.campus"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写校区"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="审批状态" :label-width="formLabelWidth"
                                      prop="status" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.status"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写审批状态"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="申请时间" :label-width="formLabelWidth"
                                      prop="createTime" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.createTime"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写申请时间"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="租车部门id" :label-width="formLabelWidth"
                                      prop="departmentId" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.departmentId"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写租车部门id"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="租车部门" :label-width="formLabelWidth"
                                      prop="departmentName">
                            <el-input
                                    v-model="addApprovalCarForm.departmentName"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写租车部门"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="出发地点" :label-width="formLabelWidth"
                                      prop="leaveAddress">
                            <el-input
                                    v-model="addApprovalCarForm.leaveAddress"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写出发地点"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="租车天数" :label-width="formLabelWidth"
                                      prop="days" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.days"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写租车天数"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="用车人数" :label-width="formLabelWidth"
                                      prop="numPeople" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.numPeople"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写用车人数"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="附件" :label-width="formLabelWidth"
                                      prop="urls">
                            <el-input
                                    v-model="addApprovalCarForm.urls"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写附件"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="车辆信息" :label-width="formLabelWidth"
                                      prop="carDetail">
                            <el-input
                                    v-model="addApprovalCarForm.carDetail"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写车辆信息"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="车辆信息填写人工号" :label-width="formLabelWidth"
                                      prop="carTeacherNumber">
                            <el-input
                                    v-model="addApprovalCarForm.carTeacherNumber"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写车辆信息填写人工号"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="车辆信息填写人姓名" :label-width="formLabelWidth"
                                      prop="carTeacherName">
                            <el-input
                                    v-model="addApprovalCarForm.carTeacherName"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写车辆信息填写人姓名"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="版本" :label-width="formLabelWidth"
                                      prop="version" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.version"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写版本"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="最后更新时间" :label-width="formLabelWidth"
                                      prop="lastUpdateTime" v-if="addApprovalCarForm.id">
                            <el-input
                                    v-model="addApprovalCarForm.lastUpdateTime"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写最后更新时间"
                            ></el-input>
                        </el-form-item>
        </el-form> -->
        <el-form :model="addApprovalCarForm" ref="addApprovalCarRef" :rules="addApprovalCarrules">
            <el-form-item label="车牌信息" :label-width="formLabelWidth">
                <el-input v-model="addApprovalCarForm.carPlate" autocomplete="off" ref="name"
                    placeholder="请填写车牌信息"></el-input>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
                <el-input v-model="addApprovalCarForm.carNumber" autocomplete="off" ref="name"
                    placeholder="请填写数量"></el-input>
            </el-form-item>
            <el-form-item label="车辆类型" :label-width="formLabelWidth">
                <el-input v-model="addApprovalCarForm.carType" autocomplete="off" ref="name"
                    placeholder="请填写车辆类型"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddApprovalCar",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addApprovalCarForm: {
                id: '',
                startTime: "",
                endTime: "",
                description: "",
                arrivalAddress: "",
                teacherNumber: "",
                teacherName: "",
                campus: "",
                status: "",
                createTime: "",
                departmentId: "",
                departmentName: "",
                leaveAddress: "",
                days: "",
                numPeople: "",
                urls: "",
                carDetail: "",
                carTeacherNumber: "",
                carTeacherName: "",
                version: "",
                lastUpdateTime: "",
                carPlate: '',
                carNumber: '',
                carType: '',
            },
            // 校验规则
            addApprovalCarrules: {
                description: vxRule(true, null, "blur"),
                arrivalAddress: vxRule(true, null, "blur"),
                teacherNumber: vxRule(true, null, "blur"),
                teacherName: vxRule(true, null, "blur"),
                departmentName: vxRule(true, null, "blur"),
                leaveAddress: vxRule(true, null, "blur"),
                urls: vxRule(true, null, "blur"),
                carDetail: vxRule(true, null, "blur"),
                carTeacherNumber: vxRule(true, null, "blur"),
                carTeacherName: vxRule(true, null, "blur"),

                carPlate: vxRule(true, null, "blur"),
                carNumber: vxRule(true, null, "blur"),
                carType: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getApprovalCarById(id) {
            console.log(id);
            httpService("/javaApi/approvalCar/queryById", { id: id }, "get").then(
                (data) => {
                    console.log(data);
                    this.addApprovalCarForm = data.approvalAppointment;
                    if (data.approvalAppointment.carDetail == null) {
                        this.addApprovalCarForm.carPlate = ""
                        this.addApprovalCarForm.carNumber = ""
                        this.addApprovalCarForm.carType = ""
                    } else {
                        const carArr = data.approvalAppointment.carDetail.split("#%&")
                        this.addApprovalCarForm.carPlate = carArr[0]
                        this.addApprovalCarForm.carNumber = carArr[1]
                        this.addApprovalCarForm.carType = carArr[2]
                    }
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addApprovalCarForm.id = "";
            this.addApprovalCarForm.startTime = "";
            this.addApprovalCarForm.endTime = "";
            this.addApprovalCarForm.description = "";
            this.addApprovalCarForm.arrivalAddress = "";
            this.addApprovalCarForm.teacherNumber = "";
            this.addApprovalCarForm.teacherName = "";
            this.addApprovalCarForm.campus = "";
            this.addApprovalCarForm.status = "";
            this.addApprovalCarForm.createTime = "";
            this.addApprovalCarForm.departmentId = "";
            this.addApprovalCarForm.departmentName = "";
            this.addApprovalCarForm.leaveAddress = "";
            this.addApprovalCarForm.days = "";
            this.addApprovalCarForm.numPeople = "";
            this.addApprovalCarForm.urls = "";
            this.addApprovalCarForm.carDetail = "";
            this.addApprovalCarForm.carTeacherNumber = "";
            this.addApprovalCarForm.carTeacherName = "";
            this.addApprovalCarForm.version = "";
            this.addApprovalCarForm.lastUpdateTime = "";
            this.addApprovalCarForm.carPlate = ""
            this.addApprovalCarForm.carNumber = ""
            this.addApprovalCarForm.carType = ""
        },
        save() {
            this.$refs.addApprovalCarRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("carDetail", this.addApprovalCarForm.carPlate + "#%&" + this.addApprovalCarForm.carNumber + "#%&" + this.addApprovalCarForm.carType);
                    params.append("version", this.addApprovalCarForm.version);
                    params.append("id", this.addApprovalCarForm.id);
                    // params.append("startTime", this.addApprovalCarForm.startTime);
                    // params.append("endTime", this.addApprovalCarForm.endTime);
                    // params.append("description", this.addApprovalCarForm.description);
                    // params.append("arrivalAddress", this.addApprovalCarForm.arrivalAddress);
                    // params.append("teacherNumber", this.addApprovalCarForm.teacherNumber);
                    // params.append("teacherName", this.addApprovalCarForm.teacherName);
                    // params.append("campus", this.addApprovalCarForm.campus);
                    // params.append("status", this.addApprovalCarForm.status);
                    // params.append("createTime", this.addApprovalCarForm.createTime);
                    // params.append("departmentId", this.addApprovalCarForm.departmentId);
                    // params.append("departmentName", this.addApprovalCarForm.departmentName);
                    // params.append("leaveAddress", this.addApprovalCarForm.leaveAddress);
                    // params.append("days", this.addApprovalCarForm.days);
                    // params.append("numPeople", this.addApprovalCarForm.numPeople);
                    // params.append("urls", this.addApprovalCarForm.urls);
                    // params.append("carDetail", this.addApprovalCarForm.carDetail);
                    // params.append("carTeacherNumber", this.addApprovalCarForm.carTeacherNumber);
                    // params.append("carTeacherName", this.addApprovalCarForm.carTeacherName);
                    // params.append("version", this.addApprovalCarForm.version);
                    // params.append("lastUpdateTime", this.addApprovalCarForm.lastUpdateTime);
                    // if (this.addApprovalCarForm.carDetail) {
                        httpService("/javaApi/approvalCar/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getApprovalCarList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    // } else {
                    //     httpService("/javaApi/approvalCar/add", params, "post").then(
                    //         (data) => {
                    //             if (data.code == 200) {
                    //                 ElMessage.success("添加成功");
                    //                 this.clear();
                    //                 //刷新父组件的数据
                    //                 this.$parent.getApprovalCarList();
                    //             } else {
                    //                 ElMessage.error("添加失败");
                    //             }
                    //         }
                    //     );
                    // }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style></style>